<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>默想房间</title>
    <meta name="viewport" content="width=device-width initial-scale=1 user-scalable=yes"/>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://imgcache.qq.com/qcloud/cloudbase-js-sdk/1.6.0/cloudbase.full.js"></script>
    <script src="./cloudbase/cloudbase-login.js"></script>
    <script src="./cloudbase/cloudbase-api.js"></script>
    <link rel="stylesheet" href="js/bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="js/bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js"></script>
    <script src="./swiper/swiper-bundle.min.js"></script>
    <script src="js/a3.js"></script>
    <link rel="stylesheet" type="text/css" href="css/public.css?a=3">
    <link rel="stylesheet" type="text/css" href="css/moxiang.css?a=71a2d1a">
    <script type="text/javascript" src="js/moxiang.js?type=22da41"></script>
    <script type="text/javascript" src="layer-v3.3.0/layer/layer.js"></script>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="layer-v3.3.0/layer/theme/default/layer.css">
    <link id="zhandianIcon" rel="shortcut icon" href="https://7372-srrz-2g24l1oea7a7e67e-1304952114.tcb.qcloud.la/icon/shanerji.png" >
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2499920_riro236cbd.css">
<!--    用一下轻量级的Vue alpin.js-->
    <script src="./js/alpine.min.js" defer></script>
</head>
<body x-data="list()" x-init="initData();" x-cloak>

    <input type="checkbox" hidden id="listCheck">
    <div class="container header">
        <div class="listIcon" >
            <label class="listCheckLabel" for="listCheck"><i class="iconfont icon-liebiao"></i></label>
        </div>
        <div id="playIcon" x-on:click="playKongzhi($event)" :class="{'xuanzhuan':playIconXuanZhuan}">
        </div>
    </div>
    <div class="container mx_text">
         <span x-text="mxTextArr[currentMxText]"></span>
         <div :class="{'setting':true,'settingFocus':tanchuangShow}" @click="settings()"></div>
    </div>
    <div class="container">
        <div class="cishu" x-text="'当前完成了第'+ cishu + '次呼吸'"></div>
    </div>

    <div x-ref="yuan" class="yuan" @click="animatePlay($refs)">
        <div class="container huxi_text" >
            <div x-text="huxiText"></div>
        </div>
    </div>

    <div class="container list-box" >
        <div class="container title-box">
            <div class="title-text">播放列表 &nbsp&nbsp <a style="color:#fff;" href="./index-bootstarp.html">点我回首页</a></div>
            <div @click="playstate()" :class="{'playstate':true,'danquxuanhuanIcon':playState==0,'xuanhuanIcon':playState==1}"></div>
        </div>
        <div class="container liat-box-i">
            <ul>
                <template x-for="item in list_data" :key="item">
                    <li>
                        <button x-text="item.xuhao+'.'+item.mulu" type="button" x-on:click="playAd(item.xuhao+item.mulu,item._id,item.dmtUrl.adUrl)">
                        </button>
                        <span class="anim"></span>
                        <span :class="{'anim_play':item.anim_play,'activePlay_p':item.activePlay_p,'activePlay':item.activePlay}">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </span>
                    </li>
                </template>
            </ul>
        </div>
    </div>

    <template x-if="tanchuangShow">
        <div id="tanchuang" class="container layui-layer-demo" >

            <label for="">自定义呼吸秒数: </label>

            <div class="jishuqi">

                <div class="jia" @click="animateDuration++">+</div>

                <input type="number" x-model.number="animateDuration">

                <div class="jian" @click.stop="jianFun()">-</div>

            </div>

            <label for="">自定义集中文本：</label>

            <textarea x-model="textarea_text" placeholder="每句话之间换行来隔开，再次点击设置按钮关闭"></textarea>

        </div>
    </template>
</body>
</html>
